<template>
    <el-table :data="data" highlight-current-row border style="width: 100%">
        <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
            :width="item.width" align="center">
            <template slot-scope="props">
                <span v-if="item.name === 'wordCourseType'">{{getWordCourseType(props.row[item.name])}}</span>
                <span v-else-if="item.name === 'wordTagId'">{{ getWordType(props.row[item.name]) }}</span>
                <audio v-else-if="item.name ==='riRy'" :src="props.row[item.name]" controls="controls" style="width:220px;height: 26px;"></audio>
                <span v-else>{{ props.row[item.name] }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="180">
            <template slot-scope="scope">
                <el-button @click.native.prevent="edit(scope.row)" type="text" size="small">
                    编辑
                </el-button>
                <el-button @click.native.prevent="del(scope.row)" type="text" size="small">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
  
<script>
export default {
    props: {
        //渲染组件使用的数据集
        data: {
            type: Array,
            required: false,
        },
        /**
         * 数据表格式定义
         * title: 数据表格的标题
         * name:  后端返回要渲染的字段名称
         * width: 当前数据占用列的宽度
         */
        formDefinition: {
            type: Array,
            required: true,
            default: [{ title: "标题", name: "field", width: "180" }]
        },
    },
    methods: {
        del(scope) {
            this.$emit('delete', scope)
        },
        edit(scope){
            console.log(scope)
            this.$emit('update',scope)
        },
        getWordCourseType(type){
            switch(type){
                case 'COMMENT_R':
                    return '大家的日本语';
                case 'STANDARD_R':
                    return '标准日本语';
                case 'SPECIALITY_R':
                    return '专业术语';
            }
        },
        getWordType(type){
            if(type == 1){
                return '一类动词';
            }else if(type == 2){
                return '二类动词';
            }else if(type == 3){
                return '三类动词「动名词」';
            }else if(type == 4){
                return 'な形容词或「二类形容词、形容动词」'
            }else if(type == 5){
                return 'い形容词「一类形容词、形容词」'
            }else if(type == 6){
                return '语法'
            }else if(type == 7){
                return '寒暄语'
            }else if(type == 8){
                return '副词'
            }else if(type == 9){
                return '名词'
            }else if(type == 10){
                return '连体词'
            }else if(type == 11){
                return '接续词'
            }else if(type == 12){
                return '名、副词'
            }else if(type == 13){
                return '动、名、副词'
            }else if(type == 14){
                return '指示词'
            }else if(type == 15){
                return '疑问词'
            }else if(type == 16){
                return '感叹词'
            }else if(type == 17){
                return 'な形容词、副词'
            }else{
                return '未知'
            }
        }
    },
};
</script>
  
<style scoped lang="scss">
.el-table {
    margin-top: 18px;
}
</style>
  